import React, { useState } from "react";

export default function Header({ handleAdd }) {
  const [task, setTask] = useState("");

  const handleKeyUp = (e) => {
    if (e.key === "Enter") {
      handleAdd(task);
      setTask("");
    }
  };
  return (
    <header className="header">
      <h1>todos</h1>
      <input
        value={task}
        onChange={(e) => setTask(e.target.value)}
        onKeyUp={handleKeyUp}
        className="new-todo"
        placeholder="需要做什么"
        autoFocus
      />
    </header>
  );
}
